<script setup lang="ts">
import {defineProps, onMounted, ref} from "vue";
import router from "../router";

interface Movie {
  MID: string;
  fanart: string;
  poster: string;
  type: string;
  length: string;
  name: string;
  score: string;
  play_count:string;
  update_time:string;
  comment_count:string;
}

const movieData = ref<Movie[]>([]);
const toMID = ref(''); // 定义 ref

// 将长度字段转换为小时：分钟格式
const formatLength = (length: string): string => {
  const minutes = parseInt(length);
  if (minutes >= 60) {
    const hours = Math.floor(minutes / 60);
    const remainingMinutes = minutes % 60;
    return `${hours.toString().padStart(2, '0')}:${remainingMinutes.toString().padStart(2, '0')}:00`;
  } else {
    return `${minutes}分钟`;
  }
};

// 将日期时间字符串转换为日期字符串
const formatDate = (datetime: string): string => {
  return datetime.split(' ')[0];
};

const fetchMovieData = async () => {
  try {
    const response = await fetch('https://movie.cpb2013.top/movie_info.php?MID='+toMID.value);
    const responseData = await response.json();
    // console.log(responseData);
    if (responseData.status === 'ok') {
      movieData.value = responseData.data.map((movie: any) => ({
        MID: movie.MID,
        fanart: movie.fanart,
        poster: movie.poster,
        type: movie.type,
        length: formatLength(movie.length),
        name: movie.name,
        score: movie.score,
        play_count: movie.play_count,
        update_time: formatDate(movie.update_time),
        comment_count:movie.comment_count,
      }));
      // console.log(movieData.value[0]);
      // console.log(responseData);
    } else {
      console.error('Error fetching movie data:', responseData.message);
    }
  } catch (error) {
    console.error('Error fetching movie data:', error);
  }
}

onMounted(() => {
  fetchMovieData();
});

// 定义 props
const props = defineProps({
  toMID: {
    type: String,
    required: true, // 将 prop 标记为必需的
  },
});

toMID.value = props.toMID;

// console.log(toMID)
const GoMovie = (MID: string) => {
  console.log('chick')
  router.push({ path: '/movie_tmp_pc', query: { MID } });
}

</script>

<template>
<view class="main" v-if="movieData.length > 0" >
  <view class="WM_Play_card_img_items">
    <view class="WM_Play_card_img_items_img">
      <el-image :src="movieData[0].fanart" style="width: 100%; height: 100%;border-radius: 10px" fit="cover" @click="GoMovie(toMID)"/>
    </view>
    <view class="WM_Play_card_img_items_length">
        <font-awesome-icon icon="fa-solid fa-stopwatch" style="color: #ffffff;margin-right: 5px" size="sm"/>{{movieData[0].length}}
    </view>
  </view>
  <view class="WM_Play_card_info_items">
    <view class="WM_Play_card_info_items_name">
      {{movieData[0].name}}
    </view>
    <view class="WM_Play_card_info_items_up">
<!--      <view class="WM_Play_card_info_items_up_name">-->
        <font-awesome-icon icon="fa-regular fa-square-caret-up" style="color: #b6b6b6; margin-right: 8px" />官方频道
<!--      </view>-->

    </view>
    <view class="WM_Play_card_info_items_playInfo">
      <view class="WM_Play_card_info_items_playInfo_play">
        <font-awesome-icon icon="fa-brands fa-youtube" style="color: #b6b6b6; margin-right: 5px" />{{movieData[0].play_count}}
      </view>
      <view class="WM_Play_card_info_items_playInfo_comment">
        <font-awesome-icon icon="fa-solid fa-rectangle-list" style="color: #b6b6b6; margin-right: 5px" />{{movieData[0].comment_count}}
      </view>
    </view>
  </view>

</view>
</template>

<style scoped>
.main
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  height: 100px;
  padding: 10px 0 10px 0;
}
.WM_Play_card_img_items
{
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  width: 40%;
}
.WM_Play_card_info_items
{
  padding-left: 8px;
  display: flex;
  flex-wrap: wrap;
  width: 60%;
}
.WM_Play_card_info_items_name
{
  user-select: none; /* 禁止选中 */
  cursor: pointer; /* 鼠标悬浮时显示指针 */
  font-size: 16px;
  font-weight: 550;
  width: 100%;
  height: 50%;
}
.WM_Play_card_info_items_up
{
  user-select: none; /* 禁止选中 */
  width: 100%;
  height: 25%;
  color: #b6b6b6;
}
.WM_Play_card_img_items_img
{
  cursor: pointer; /* 鼠标悬浮时显示指针 */
  display: flex;
  width: 100%;

}
.WM_Play_card_info_items_playInfo
{
  user-select: none; /* 禁止选中 */
  display: flex;
  height: 25%;
  width: 100%;
  color: #b6b6b6;
}
.WM_Play_card_info_items_playInfo_play
{
  display: flex;
  justify-content: center;
}
.WM_Play_card_info_items_playInfo_comment
{
  display: flex;
  justify-content: left;
  margin-left: 10px;
}
.WM_Play_card_img_items_length
{

  border-radius: 5px;
  padding: 2px;
  display: flex;
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: white;
  font-size: 10px;
  background-color: rgba(0, 0, 0, 0.35); /* 半透明白色背景 */
}
</style>